/*
 * @Author: wangtao
 * @Date: 2020-06-29 16:32:41
 * @LastEditors: kanglang
 * @LastEditTime: 2021-01-25 12:45:01
 * @Description: file content
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Modal,
  Text,
  TouchableOpacity,
  PixelRatio,
} from 'react-native';
import {
  mainBgColorLightGray,
  fontColorLightCoffee,
  priceColor,
  fontColorBlack,
  fontColorLightGray,
  fontColorCoffee,
  screenWidth,
  px2dp,
  screenHeight,
  splitLineColorLightGray,
  fontColorSecDeepGray,
  mainBgColorBlack,
} from '@/styles';
import { Button, msg } from '@/common';

const { Submit } = Button;

export default class SelectItem extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

    static defaultProps = {
      style: {}
    }

    componentDidMount() { }

    render() {
      const { name, type, value, activeVal, onChange, style } = this.props;
      return (
        <TouchableOpacity
          activeOpacity={1}
          style={[
            styles.selectItem,
            style,
            activeVal.includes(value)
              ? { backgroundColor: fontColorLightCoffee, borderColor: fontColorCoffee, borderWidth: px2dp(1) }
              : {},
          ]}
          onPress={() => {
            this.onChange();
          }}
        >
          <Text
            style={[
              styles.selectText,
              activeVal.includes(value)
                ? { color: fontColorCoffee }
                : { color: fontColorSecDeepGray }]}
          >
            {name}
          </Text>
        </TouchableOpacity>
      );
    }

    onChange = () => {
      const { maxLength, onChange, type, value, activeVal } = this.props;
      // 以下是多选内容，目前只需要做到单选
      if (maxLength) {
        if (!activeVal.includes(value) || activeVal.length > maxLength) {
          if (activeVal.length >= maxLength) {
            return;
          }
          activeVal.push(value);
          onChange(type, activeVal);
        } else {
          const index = activeVal.indexOf(value);
          activeVal.splice(index, 1);
          onChange(type, activeVal);
        }
      } else {
        onChange(type, [value]);
      }
    }
}
const styles = StyleSheet.create({
  selectItem: {
    flex: 1,
    height: px2dp(72),
    backgroundColor: mainBgColorLightGray,
    borderRadius: px2dp(8),
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: px2dp(16),
    marginRight: px2dp(10),
  },
  selectText: {
    fontSize: px2dp(28),
  }
});
